@use "sass:string";

// 主色
$primary-color: #2d51a0; //主颜色
$primary-color-light: rgba(#b3c4ff, 0.1); // 浅主色

$delete-color: #ea0000; //删除操作的颜色
$screen-color: #ddeff0; //筛选按钮的背景色
$border-color: #e7e7e7;

// 按钮
$primary-button-color: linear-gradient(-270deg, #345ef0 0%, #638aff 100%);

// 文字颜色
$main-color: #3d3d3d; // 标题
$base-color: #777777; // 常规文字
$secondary-color: #888888; // 次要文字
$extra-color: #c0c4cc; // 辅助文字

// 字体大小
$main-font-size: 18px; // 标题
$base-font-size: 16px; // 常规文字
$secondary-font-size: 14px; // 次要文字
$extra-font-size: 12px; // 辅助文字

@function str-split($string, $separator) {
    $split-arr: ();
    $index: str-index($string, $separator);
    @while $index != null {
        $item: str-slice($string, 1, $index - 1);
        $split-arr: append($split-arr, $item);
        $string: str-slice($string, $index + 1);
        $index: str-index($string, $separator);
    }
    $split-arr: append($split-arr, $string);
    @return $split-arr;
}

@mixin marginpadding($m-start: 12px, $m-offset: 4px, $m-num: 6) {
    $dirction: (
        "t": "top",
        "l": "left",
        "b": "bottom",
        "r": "right",
        x: "",
        y: "",
        a: "",
    );
    @each $k, $v in $dirction {
        @for $i from 0 through $m-num {
            $r: $m-start + $i * $m-offset;
            $nr: -1 * $r;
            $k_v: string.slice($r + "", 0, -3);
            $selector1: ":global(.m-#{$k}-#{$k_v})";
            $selector2: " :global(.p-#{$k}-#{$k_v})";
            $selector3: ":global(.m-#{$k}-n#{$k_v})";
            $selector4: ":global(.p-#{$k}-n#{$k_v})";
            @if $k == "x" {
                #{$selector1} {
                    margin-left: $r;
                    margin-right: $r;
                }
                #{$selector2} {
                    padding-left: $r;
                    padding-right: $r;
                }
                #{$selector3} {
                    margin-left: $nr;
                    margin-right: $nr;
                }
                #{$selector4} {
                    padding-left: $nr;
                    padding-right: $nr;
                }
            } @else if $k == "y" {
                #{$selector1} {
                    margin-top: $r;
                    margin-bottom: $r;
                }
                #{$selector2} {
                    padding-top: $r;
                    padding-bottom: $r;
                }
                #{$selector3} {
                    margin-top: $nr;
                    margin-bottom: $nr;
                }
                #{$selector4} {
                    padding-top: $nr;
                    padding-bottom: $nr;
                }
            } @else if $k == "a" {
                #{$selector1} {
                    margin: $r;
                }
                #{$selector2} {
                    padding: $r;
                }
                #{$selector3} {
                    margin: $nr;
                }
                #{$selector4} {
                    padding: $nr;
                }
            } @else {
                #{$selector1} {
                    margin-#{$v}: $r;
                }
                #{$selector2} {
                    padding-#{$v}: $r;
                }
                #{$selector3} {
                    margin-#{$v}: $nr;
                }
                #{$selector4} {
                    padding-#{$v}: $nr;
                }
            }
        }
    }
}

@include marginpadding();

@mixin radius($radius-start: 10px, $radius-offset: 4px, $radius-num: 6) {
    $dirction2: (
        "t": "top-left top-right",
        "r": "top-right bottom-right",
        "b": "bottom-left bottom-right",
        "l": "top-left bottom-left",
        "tl": "top-left",
        "tr": "top-right",
        "bl": "bottom-left",
        "br": "bottom-right",
        "a": "",
    );
    @each $k, $v in $dirction2 {
        @for $i from 0 through $radius-num {
            $r: #{$radius-start + $i * $radius-offset};
            $k_v: string.slice($r + "", 0, -3);
            $selector: ".r-#{$k}-#{$k_v}";
            $v_list: str-split($v, " ");
            @if $k != "a" {
                :global(#{ $selector}) {
                    @each $v_v in $v_list {
                        border-#{$v_v}-radius: $r;
                    }
                }
            } @else {
                :global(#{ $selector}) {
                    border-radius: $r;
                }
            }
        }
    }
}

@include radius();

/* 滚动条凹槽的颜色，还可以设置边框属性 */
*::-webkit-scrollbar-track-piece {
    background-color: #f8f8f8;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}

/* 滚动条的宽度 */
*::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

/* 滚动条的设置 */
*::-webkit-scrollbar-thumb {
    background-color: #ddd;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    background-clip: padding-box;
}

/* 滚动条鼠标移上去 */
*::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
}
